import React from 'react';
import { connect } from 'dva'
import { Divider } from 'antd'
import { Page } from 'components'
import PageHeaderLayout from 'components/Layout/PageHeaderLayout'
import GeneralFilter from 'components/Filter/GeneralFilter'
import LwjTable from 'components/LwjTable'
import lodash from 'lodash'
import { auditStatus } from "utils/enumConfig"
import styles from './List.less'
import DetailModal from './detailModal'
import EditModal from './editModal'

const DistributorList = ({ location, dispatch, distributorList, app, loading }) => {
  const { list, detailVisible, editVisible, currentItem, currentIndex, pagination, queryParam, levels, registryTypeList, registryTypes } = distributorList;
  const breadcrumbList = [
    {
      title: '小程序',

    }, {
      title: '门店管理',

    }
  ];
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'displayName',
        title: '店铺名称'
      },
      {
        type: 'input',
        id: 'code',
        title: '门店编码'
      },
      {
        type: 'input',
        id: 'signerMobile',
        title: '手机号码'
      },
      {
        type: 'select',
        id: 'distributorSignerRole',
        title: '用户类型',
        defaultValue: "",
        options: registryTypeList
      },
    ],
    isExpand: true,
    col: 8,
    onFilterChange(value) {
      dispatch({
        type: 'distributorList/changeFilter',
        queryParam: value
      })
      dispatch({
        type: 'distributorList/query',
        payload: {
          start: 0,
          limit: pagination.page
        }
      })
    }
  }
  const tableProps = {
    dataSource: list,
    loading: loading.effects['distributorList/query'],
    pagination,
    pageChangeAction: 'distributorList/query',
    dispatch,
    location,
    onExpand(expanded, currentItem){
      if(expanded){
        dispatch({
          type: 'distributorList/queryDistributorChilds',
          currentItem
        })
      }
    }
  }
  const columns = [
    {
      title: '店铺名称',
      dataIndex: 'displayName',
      key: 'displayName',
      width: '25%',
      align: 'left',
      render: (text, record, index) => (
        <div>{text}</div>
      )
    }, {
      title: '发展下级门店',
      dataIndex: 'childrenNode',
      key: 'childrenNode',
      width: '9%'
    }, {
      title: '门店名称',
      dataIndex: 'name',
      key: 'name',
      width: '9%'
    }, {
      title: '门店编码',
      dataIndex: 'code',
      key: 'code',
      width: '9%'
    }, {
      title: '小程序用户',
      dataIndex: 'distributorSignerName',
      key: 'distributorSigner',
      width: '9%'
    }, {
      title: '用户角色',
      dataIndex: 'distributorSignerRole',
      key: 'distributorSignerRole',
      width: '10%',
      render: (text, record, index) => (
          <span>{registryTypes[text]}</span>
        )
    }, {
      title: '手机号码',
      dataIndex: 'distributorSignerMobile',
      key: 'distributorSignerMobile',
      width: '9%'
    }, {
        title: '操作',
        key: 'handle',
        width: '10%',
        render: (text, record, index) => (
          <span>
            <a onClick={() => showEditModal(true, record)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => showDetailModal(true, record)}>查看</a>
          </span>
        )
    }
  ]
  const detailProps = {
    visible: detailVisible,
    item: currentItem,
    dispatch,
    effects: loading.effects
  }
  const showDetailModal = (flag, currentItem) => {
    dispatch({
      type: 'distributorList/queryDistributorDetail',
      currentItem,
      field: 'detailVisible',
      flag
    })
  }
  const editProps = {
    visible: editVisible,
    item: currentItem,
    dispatch,
    levels,
    effects: loading.effects
  }
  const showEditModal = (flag, currentItem) => {
    dispatch({
      type: 'distributorList/queryDistributorDetail',
      currentItem,
      field: 'editVisible',
      flag
    })
    dispatch({
      type: 'distributorList/queryDistributorLevels',
      params: {
        id: currentItem.key
      }
    })
  }
  const handleFormChange = (changedFields = {})=>{
    let queryParam = {};
    for( let key in changedFields){
      queryParam[key] = changedFields[key].value
    }
    dispatch({
      type: 'distributorList/changeFilter',
      queryParam: queryParam
    })
  }
  return (
    <PageHeaderLayout title="门店管理" breadcrumbList={breadcrumbList}>
      <Page inner className={styles.distributorList}>
        <GeneralFilter {...filterProps} onChange={handleFormChange}/>
        <LwjTable {...tableProps} columns={columns} />
        <DetailModal {...detailProps} />
        <EditModal {...editProps} />
      </Page>
    </PageHeaderLayout>
  )
};
export default connect(({ distributorList, app, loading, load }) => ({ distributorList, app, loading, load }))(DistributorList)

